<!DOCTYPE html>
<html lang="en">
<?php include 'headers.php'; ?>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>番茄钟</title>
</head>

<body>
    <div class="main">
        <div class="container">
            <div class="top">
                <div class="choose_time">
                    <a for="study-duration">学习时长</a>
                    <input type="text" id="study-duration" placeholder="请输入您要学习的时长(分钟)">
                    <button id="start-btn">开始</button>
                </div>
                <div class="uninvisible" id="time-info">
                    <div class="time_box">
                        <label>开始时间：</label>
                        <div class="start_time" id="start-time"></div>
                    </div>
                    <div class="time_box">
                        <label>当前已学：</label>
                        <div class="elapsed_time" id="elapsed-time"></div>
                    </div>
                    <div class="time_box">
                        <label>结束时间：</label>
                        <div class="end_time" id="end-time"></div>
                    </div>
                </div>
            </div>

            <div class="middle1">
                <div class="left">
                    <div class="course_name">课程名称</div>
                    <div class="course_list">
                        <ul>
                            <li data-target="notifications">课程资料1</li>
                            <li data-target="materials">课程资料2</li>
                            <li data-target="assignments">课程资料3</li>
                            <li data-target="exams">课程资料4</li>
                            <li data-target="discussions">课程资料5</li>
                            <li data-target="reviews">课程资料6</li>
                            <li data-target="analytics">课程资料7</li>
                        </ul>
                    </div>
                </div>
                <div class="mid1">
                    <div class="detail">
                        <span>
                            <video width="750" height="400" controls>
                                <source src="./resource/1.mp4" type="video/mp4">
                        </span>
                    </div>
                </div>
                <div class="right">
                    <p>Todo List</p>
                    <input type="text" id="todo-input" placeholder="添加一项待办事项">
                    <button id="add-todo">添加</button>
                    <ul id="todo-list"></ul>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const startBtn = document.getElementById('start-btn');
            const studyDurationInput = document.getElementById('study-duration');
            const timeInfo = document.getElementById('time-info');
            const startTimeDisplay = document.getElementById('start-time');
            const elapsedTimeDisplay = document.getElementById('elapsed-time');
            const endTimeDisplay = document.getElementById('end-time');

            let timer;
            let startTime;
            let elapsedTime = 0;

            startBtn.addEventListener('click', () => {
                const studyDuration = parseInt(studyDurationInput.value, 10);
                if (isNaN(studyDuration) || studyDuration <= 0) {
                    alert('请输入有效的学习时长');
                    return;
                }

                // 显示时间信息盒子
                timeInfo.classList.add('visible');

                // 初始化时间
                startTime = new Date();
                startTimeDisplay.textContent = `${startTime.getHours()}:${startTime.getMinutes()}`;

                const endTime = new Date(startTime.getTime() + studyDuration * 60000);
                endTimeDisplay.textContent = `${endTime.getHours()}:${endTime.getMinutes()}`;

                // 清除之前的计时器
                if (timer) clearInterval(timer);

                // 隐藏 choose_time 元素
                const chooseTime = document.querySelector('.choose_time');
                chooseTime.style.display = 'none';

                // 显示提示信息
                alert('请按 F11 进入全屏显示');

                // 开始计时
                timer = setInterval(() => {
                    const now = new Date();
                    elapsedTime = Math.floor((now - startTime) / 60000);
                    elapsedTimeDisplay.textContent = `${elapsedTime} 分钟`;

                    if (elapsedTime >= studyDuration) {
                        clearInterval(timer);
                        alert('学习时间结束！');
                    }
                }, 1000);
            });

            // 获取 DOM 元素
            const todoInput = document.getElementById('todo-input');
            const addTodoBtn = document.getElementById('add-todo');
            const todoList = document.getElementById('todo-list');

            // 添加按钮点击事件
            addTodoBtn.addEventListener('click', () => {
                const todoText = todoInput.value.trim();
                if (todoText !== "") {
                    // 创建新的列表项
                    const newTodoItem = document.createElement('li');
                    newTodoItem.textContent = todoText;

                    // 创建删除按钮
                    const deleteBtn = document.createElement('button');
                    deleteBtn.textContent = '删除';
                    deleteBtn.addEventListener('click', () => {
                        todoList.removeChild(newTodoItem);
                    });

                    // 将删除按钮添加到列表项
                    newTodoItem.appendChild(deleteBtn);

                    // 将新的列表项添加到列表中
                    todoList.appendChild(newTodoItem);

                    // 清空输入框
                    todoInput.value = "";
                }
            });
        });
    </script>
</body>
<style lang="scss" scoped>
    .container {
        .top {
            display: flex;
            flex-direction: row;
            width: 94%;
            background-color: #ffffff;
            border-radius: 12px;
            padding: 20px;
            align-items: center;
        }

        .middle1 {
            display: flex;
            flex-direction: row;
        }

        .left {
            display: flex;
            flex-direction: column;
            width: 16vw;
            height: 50vh;
            margin-top: 30px;
            background-color: #ffffff;
            border-radius: 12px;
            overflow-y: auto;
            align-items: center;

            .course_name {
                font-size: 20px;
                color: #333333;
                margin-top: 20px;
                font-weight: bolder;
            }

            .course_list {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;
                max-height: 500px;
                overflow-y: auto;
            }

            .course_list ul {
                list-style-type: none;
                padding: 0;
                margin: 0;

            }

            .course_list li {
                text-align: center;
                padding: 10px;
                height: 24px;
                line-height: 24px;
                margin-top: 10px;
                border-bottom: 1px solid #e0e0e0;
                font-family: Arial, sans-serif;
                font-size: 16px;
            }

            .course_list li:last-child {
                border-bottom: none;
            }
        }

        .mid1 {
            width: 55vw;
            height: 60vh;
            background-color: #FFFFFF;
            margin-top: 3vh;
            margin-left: 20px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .right {
            margin-left: 40px;
            margin-top: 3vh;
            border-radius: 12px;
            background-color: #FFFFFF;
            width: 15vw;
            height: 60vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            /* 添加内边距 */

            #todo-input {
                width: 100%;
                padding: 8px;
                margin-bottom: 10px;
                border: 1px solid #ccc;
                border-radius: 5px;
            }

            #add-todo {
                padding: 8px 15px;
                border: none;
                border-radius: 5px;
                background-color: #4CAF50;
                color: white;
                cursor: pointer;
                margin-bottom: 10px;
            }

            #todo-list {
                list-style: none;
                padding: 0;
                width: 100%;
                height: 40vh;
                overflow-y: auto;
            }

            #todo-list li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 8px;
                margin-bottom: 5px;
                border: 1px solid #ccc;
                border-radius: 5px;
            }

            #todo-list li button {
                background-color: transparent;
                border: none;
                cursor: pointer;
            }
        }
    }

    .header {
        display: flex;
        flex-direction: row;
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #FFFFFF;
        height: 64px;
        align-items: center;

        .item {
            display: flex;
            margin-left: 20px;
            line-height: 64px;
            align-items: center;

            span {
                font-size: 16px;
                color: #333333;
                margin-left: 20px;
                margin-left: 3vw;
                font-weight: bold;
            }
        }

        .plat_name {
            font-size: 24px;
            color: #333333;
            margin-left: 20px;
            font-weight: bold;
            margin-left: 10vw;
        }

        .personality {
            margin-left: 25vw;
            font-size: 16px;
        }

        .avatar {
            margin-top: 30px;
            margin-left: 30px;
            width: 50px;
            height: 50px;
            border-radius: 100%;
        }
    }

    body {
        font-family: Arial, sans-serif;
        background-color: #F5F5F5;
    }

    .main {
        display: flex;
        flex-direction: column;
    }

    .top,
    .middle {
        display: flex;
    }

    .choose_time {
        margin-right: 20px;
        margin-left: 20px;
        font-size: 20px;
        font-weight: 600;

        input {
            margin-left: 20px;
            border: 0;
            border-bottom: 1px solid;
            width: 13vw;
        }

        button {
            padding: 8px 15px;
            border: none;
            border-radius: 5px;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            margin-left: 10px;
        }
    }

    .time_box {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 20px;
        font-size: 20px;
        font-weight: 600;
    }

    .uninvisible {
        display: none;
        /* 初始状态不可见 */

    }

    .uninvisible.visible {
        display: block;
        /* 切换为可见 */
        display: flex;
        flex-direction: row;
    }
</style>

</html>